<template>
  <!--index.wxml-->
  <view class="container" :class="windowHeight > 700 ? 'container-813' : ''">
    <!-- <view class="show">
      <image :src="{cardPath}"
             alt=""
             class="card"></image>
      <text class="name">{{sendName}}</text>
      <image :src="{headPath}"
             class="header"></image>
    </view>
    <view class="btn"
          @click="saveImage">保存图片</view> -->

    <view class="preview" :class="windowHeight <= 700 ? 'preview-667' : ''">
      <view class="img">
        <!-- <image class="img-current" src="{{sendImg}}"
               mode="widthFix" /> -->
        <image class="img-bg" :src="cardPath" mode="widthFix" />
        <view class="text">
          <text class="name" :class="company_id === 'szjl' || company_id === 'szdd' ? 'day1 day1_100' : 'day1'">{{
              applyDate[0]
          }}</text>
          <text class="name" :class="company_id === 'szjl' || company_id === 'szdd' ? 'day2 day2_100' : 'day2'">{{
              applyDate[1]
          }}</text>
          <text class="name" :class="company_id === 'szjl' || company_id === 'szdd' ? 'day3 day3_100' : 'day3'">{{
              applyDate[2]
          }}</text>
          <text class="name"  :class="company_id === 'szjl' || company_id === 'szdd' ? 'day4 day4_100' : 'day4'">{{
              applyTime[0] +
              '点' + applyTime[1] + '分'
          }}</text>
          <text class="name" :class="company_id === 'szjl' || company_id === 'szdd' ? 'car car_100' : 'car'">{{ applyCar
          }}</text>
          <text class="name" :class="company_id === 'szjl' || company_id === 'szdd' ? 'name_ name__100' : 'name_'">{{ name
          }}</text>
          <text
            class="name name_detailsShare" :class="company_id === 'szdd' ? 'p_company p_company_100' : company_id === 'szjl' ? 'p_company p_company_100-' : 'p_company'">{{
                detailsShareObj.company_materials
            }}</text>
          <text
            class="name name_detailsShare" :class="company_id === 'szdd' ? 'p_substitution p_substitution_100' : company_id === 'szjl' ? 'p_substitution p_substitution_100-' : 'p_substitution'">{{
                detailsShareObj.substitution_materials
            }}</text>
          <text
            class="name name_detailsShare" :class="company_id === 'szdd' ? 'p_user p_user_100' : company_id === 'szjl' ? 'p_user p_user_100-' : 'p_user'">{{
                detailsShareObj.user_materials
            }}</text>
          <text
            class="name name_detailsShare" :class="company_id === 'szjl' || company_id === 'szdd' ? 'p_other p_other_100' : 'p_other'">{{
    detailsShareObj.other_materials
      == null ? '' : detailsShareObj.other_materials
            }}</text>
          <!-- <view class="user">
            <view class="img-text"><image mode="widthFix" :src="{sendUserInfo.avatarUrl}" /></view>
            <text class="name">{{sendUserInfo.nickName}}</text>
          </view> -->
          <view class="qs">
            <image mode="widthFix" :src="sendCar" />
          </view>
          <!-- <text class="name" style="font-size:26rpx">{{sendName}} - {{sendPhone}}</text> -->
          <!-- <text class="name">{{sendZone}} - {{sendAddress}}</text>
          <text class="name">{{sendTime}}</text> -->
        </view>
      </view>
      <view class="btn">
        <button type="primary" size="mini" @click="saveImage">保存邀请函</button>
      </view>
    </view>

    <view class="canvasBox">
      <view class="canvasBox" style="width:0;height:0;overflow: hidden;opacity:0; ">
        <canvas canvas-id='myCanvas' style="width:600px;height:2100px;"></canvas>
      </view>
    </view>
    <!-- <Authorization @funUserInfo.user="funUserInfo" /> -->
  </view>
</template>

<script>
// import invitation from '@/mixins/invitation';
import { postAddShare } from '@/API/invite'

export default {
  // mixins: [invitation], // 混入
  data() {
    return {
      cardPath: 'https://www.kamlung.net/images/activity/gzjl_20220613_bg_600x2100.jpg',
      headPath: 'https://www.kamlung.net/images/activity/gzjl_20220613_bg_600x2100.jpg',
      tmpThumbs: [],

      name: uni.getStorageSync('name'),
      applyDate: uni.getStorageSync('applyDate'),
      applyTime: uni.getStorageSync('applyTime'),
      applyCar: uni.getStorageSync('applyCar'),
      detailsShareObj: uni.getStorageSync('detailsShareObj'),
      company_id: uni.getStorageSync('company_id'),
      telephone: uni.getStorageSync('telephone'),
      qrCodeImg: '',
      sendAddres: 123,
      sendCusType: 467,
      sendTime: 890,
      urlWx: 1111111111,
      windowWidth: '',
      windowHeight: ''
    }
  },
  onLoad() {
    let that = this
    that.name = uni.getStorageSync('name')
    that.applyDate = uni.getStorageSync('applyDate')
    that.applyTime = uni.getStorageSync('applyTime')
    that.applyCar = uni.getStorageSync('applyCar')
    that.detailsShareObj = uni.getStorageSync('detailsShareObj')
    that.company_id = uni.getStorageSync('company_id')
    that.telephone = uni.getStorageSync('telephone')
    that.cardPath = `https://www.kamlung.net/images/activity/${that.company_id}_20220613_bg_600x2100.jpg`
    that.headPath = `https://www.kamlung.net/images/activity/${that.company_id}_20220613_bg_600x2100.jpg`

    uni.getSystemInfo({
      success: function (res) {
        console.log('res.windowHeight', res.windowHeight);
        // console.log('res.windowWidth', res.windowWidth)
        console.log('res', res);

        if (res.windowWidth > 415) {
          that.windowWidth = 414;
        } else {
          that.windowWidth = res.windowWidth;
        }
        if (
          res.model == 'Windows' ||
          res.model == 'iPad' ||
          res.model.slice(0, 4) == 'iPad'
        ) {
          that.windowHeight = 667;
        } else if (res.windowHeight > 813) {
          that.windowHeight = 812;
        } else if (res.windowHeight < 700) {
          that.windowHeight = 667;
        } else {
          that.windowHeight = res.windowHeight;
        }

        console.log(' that.windowHeight', that.windowHeight);
        // ratio = that.windowWidth / 375  // 自适应比例
      }
    })
  },
  methods: {
    /*画图*/
    drawCanvas() {
      uni.showLoading({
        title: 'Loading',
      })
      let that = this;
      let ctx = uni.createCanvasContext('myCanvas');
      let ctxW = 600;
      let ctxH = 2100;
      ctx.width = 600;
      ctx.height = 2100;
      let x = ctx.width / 2;
      let r = 1.875
      let hr = 20
      let hr_time = 0
      let hr_left = 0
      let hr_szjl = 0

      if (that.company_id === 'szdd') {
        hr = 228
        hr_time = 35
        hr_left = 10
        hr_szjl = 0
      } else if (that.company_id === 'szjl') {
        hr = 228
        hr_time = 35
        hr_left = 0
        hr_szjl = 10
      }

      // 垂直渐变
      const grd = ctx.createLinearGradient(0, 0, 0, ctxH);
      grd.addColorStop(0, '#ffffff');
      grd.addColorStop(1, '#ffffff');
      ctx.setFillStyle(grd);

      ctx.fillRect(0, 0, ctxW, ctxH);

      uni.getImageInfo({
        src: that.cardPath,
        success: res => {
          ctx.drawImage(res.path, 0, 0, 600, 2100); //card
          ctx.save();
          // ctx.setFontSize(18); //字体大小
          ctx.setFillStyle('#222'); //字体颜色
          ctx.textAlign = 'left'; //文字居中
          ctx.font = 'normal bold 22px Microsoft JhengHei';
          ctx.fillText(that.applyDate[0], 27 * r, (243 * r) + hr - hr_time, 2100);
          ctx.fillText(that.applyDate[1], 71 * r, (243 * r) + hr - hr_time, 2100);
          ctx.fillText(that.applyDate[2], 102 * r, (243 * r) + hr - hr_time, 2100);
          ctx.fillText(that.applyTime[0] + '点' + that.applyTime[1] + '分', 134 * r, (243 * r) + hr - hr_time, 2100);

          ctx.setFillStyle('#e92742'); //字体颜色
          ctx.font = 'normal bold 28px Microsoft JhengHei UI';
          ctx.fillText(that.applyCar, 240 * r, (244.2 * r) + hr - hr_time, 2100);

          // ctx.setFontSize(15); //字体大小
          ctx.font = 'normal bold 26px Microsoft JhengHei UI';
          ctx.setFillStyle('#222'); //字体颜色
          ctx.fillText(that.name, 67 * r + hr_left, (283.5 * r) + hr + 10 - hr_time, 2100);

          ctx.font = 'normal bold 22px Microsoft JhengHei';
          ctx.setFillStyle('#808080'); //字体颜色
          that.drawText(ctx, that.detailsShareObj.company_materials, 35 * r, (699 * r + hr) - hr_szjl, 2100, 500);
          // ctx.fillText(that.detailsShareObj.company_materials, 35*r, 699*r + 20, 2100);
          that.drawText(ctx, that.detailsShareObj.substitution_materials, 35 * r, (768 * r + hr) - hr_szjl * 2.2, 2100, 500);
          // ctx.fillText(that.detailsShareObj.substitution_materials, 35*r, 767*r + 20, 2100);
          that.drawText(ctx, that.detailsShareObj.user_materials, 35 * r, (834 * r + hr) - hr_szjl * 3.3, 2100, 500);
          // ctx.fillText(that.detailsShareObj.user_materials, 35*r, 835*r + 20, 2100);
          that.drawText(ctx, (that.detailsShareObj.other_materials == null ? '' : that.detailsShareObj.other_materials), 35 * r, (902 * r + hr) - hr_szjl * 4, 2100, 500);
          // ctx.fillText(that.detailsShareObj.other_materials, 35*r, 902*r + 20, 2100);
          // let texttxt = '扫码即刻查看车辆信息扫码即刻查看车辆信息扫码即刻查看车辆信息扫码即刻查看车辆信息扫码即刻查看车辆信息扫码即刻查看车辆信息扫码即刻查看车辆信息扫码即刻查看车辆信息扫码即刻查看车辆信息扫码即刻查看车辆信息扫码即刻查看车辆信息扫码即刻查看车辆信息扫码即刻查看车辆信息扫码即刻查看车辆信息扫码即刻查看车辆信息扫码即刻查看车辆信息扫码即刻查看车辆信息扫码即刻查看车辆信息扫码即刻查看车辆信息扫码即刻查看车辆信息扫码即刻查看车辆信息扫码即刻查看车辆信息扫码即刻查看车辆信息扫码即刻查看车辆信息'
          // that.drawText(ctx, texttxt, 30, 806, 1095, 480)


          // for (var i = 0; i < txt.length; i++){
          //   if (ctx.measureText(txt.substring(0,i+1)).width>280){ 
          //     ctx.fillText(txt.substring(0,i),30,806,1095)
          //     ctx.fillText(txt.substring(i),30,840,1095)
          //     break
          //   }
          // }
          // ctx.fillText('', 30, 806, 1095);

          // ctx.fillText(that.sendUserInfo.nickName, 130, 896, 1095);
          ctx.save();
          ctx.restore();

          ctx.draw(false, function () {
            uni.canvasToTempFilePath({
              x: 0, //指定的画布区域的左上角横坐标
              y: 0, //指定的画布区域的左上角纵坐标
              width: 600, //指定的画布区域的宽度
              height: 2100, //指定的画布区域的高度
              destWidth: 600, //输出的图片的宽度
              destHeight: 2100, //输出的图片的高度
              canvasId: 'myCanvas',
              fileType: 'jpg', //图片的质量，目前仅对 jpg 有效。取值范围为 (0, 1]，不在范围内时当作 1.0 处理。
              quality: 1,
              success: res => {
                uni.saveImageToPhotosAlbum({
                  filePath: res.tempFilePath,
                  success(result) {
                    uni.hideLoading()
                    let data = {
                      name: that.name,
                      company: that.company_id,
                      model: that.applyCar,
                      data: `${that.applyDate[0]}-${that.applyDate[1]}-${that.applyDate[2]} ${that.applyTime[0]}:${that.applyTime[1]}`,
                      company_materials: that.detailsShareObj.company_materials,
                      substitution_materials: that.detailsShareObj.substitution_materials,
                      user_materials: that.detailsShareObj.user_materials,
                      other_materials: that.detailsShareObj.other_materials == null ? '' : that.detailsShareObj.other_materials,
                      telephone: that.detailsShareObj.telephone
                    }
                    let res = postAddShare(data);
                    console.log('res', res)
                    uni.showToast({
                      title: '图片保存成功',
                      icon: 'success',
                      duration: 1200
                    });
                  },
                  fail: () => {
                    uni.getSetting({
                      success: function (res) {
                        var statu = res.authSetting;
                        if (!statu['scope.writePhotosAlbum']) {
                          uni.showModal({
                            title: '是否保存相册到你的相册',
                            content:
                              '需要授权你的相册，请确认授权，否则将无法保存图片',
                            success: function (tip) {
                              if (tip.confirm) {
                                uni.openSetting({
                                  success: function (data) {
                                    if (
                                      data.authSetting[
                                      'scope.writePhotosAlbum'
                                      ] === true
                                    ) {
                                      uni.showToast({
                                        title: '授权成功',
                                        icon: 'success',
                                        duration: 1000
                                      });
                                      //授权成功之后，再调用chooseLocation选择地方
                                    } else {
                                      uni.showToast({
                                        title: '授权失败',
                                        icon: 'success',
                                        duration: 1000
                                      });
                                    }
                                  }
                                });
                              }
                            }
                          });
                        } else {
                          uni.hideLoading()
                          uni.showToast({
                            title: '取消保存图片',
                            icon: 'success',
                            duration: 1200
                          });
                          console.log('nonononononono');
                        }
                      }
                    });
                  }
                });
              }
            });
          });
        }
      });
    },
    //文本换行 参数：1、canvas对象，2、文本 3、距离左侧的距离 4、距离顶部的距离 5、6、文本的宽度
    drawText(ctx, str, leftWidth, initHeight, titleHeight, canvasWidth) {
      var lineWidth = 0;
      var lastSubStrIndex = 0; //每次开始截取的字符串的索引
      if (str === null) return false
      for (let i = 0; i < str.length; i++) {
        lineWidth += ctx.measureText(str[i]).width;
        if (lineWidth > canvasWidth) {
          ctx.fillText(str.substring(lastSubStrIndex, i), leftWidth, initHeight); //绘制截取部分
          initHeight += 22; //22为字体的高度
          lineWidth = 0;
          lastSubStrIndex = i;
          titleHeight += 30;
        }
        if (i == str.length - 1) { //绘制剩余部分
          ctx.fillText(str.substring(lastSubStrIndex, i + 1), leftWidth, initHeight);
        }
      }
      // 标题border-bottom 线距顶部距离
      titleHeight = titleHeight + 10;
      return titleHeight
    },
    /* 保存图片 */
    saveImage(e) {
      this.drawCanvas();
    },
    funUserInfo(e) {
      let that = this;
      that.sendTitle = uni.getStorageSync('title');
      that.sendImg = uni.getStorageSync('img');
      // that.sendCar = uni.getStorageSync('car');
      that.sendUserInfo = e;
    }
  }
}
</script>

<style lang="scss">
/*css*/
.container-813 {
  background-color: rgba(0, 0, 0, 0.8);
  height: 1400px;
}

.preview-667 {
  position: relative !important;
  height: 1400px !important;
  background-color: rgba(0, 0, 0, 0.8);

  .img {
    margin: 0 !important;
    height: auto !important;
  }

  .text {
    // bottom: 4.9% !important;
    bottom: 60rpx !important;

    .qs {
      bottom: 44px !important;
    }
  }

  .btn {
    padding: 20rpx 0 70rpx 0 !important;

    button {
      font-size: 28rpx !important;
    }
  }
}

.preview {
  // position: fixed;
  top: 0;
  left: 0;
  // width: 100vw;
  width: 360px;
  height: 1400px;
  margin: 0 auto;
  // height: 100vh;
  // height: 1624rpx;
  // background-color: rgba(0, 0, 0, 0.8);
  z-index: 2;
  text-align: center;
  display: flex;
  flex-flow: column;
  overflow: hidden;
}

.preview .img {
  // width: 84%;
  // height: 90%;
  // margin: 30rpx 8% 0;
  width: 100% !important;
  height: 2100rpx !important;
  margin: 30rpx auto 0;
  position: relative;

  .img-current {
    position: absolute;
    padding: 20px 20px 0;
    // width: ~'calc(100% - 80rpx)' !important;
    height: 100%;
  }

  .img-bg {
    width: 100% !important;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
  }
}

// .preview image {
//   width: 100%;
//   height: 100%;
// }

.preview .btn {
  padding: 20rpx 0 100rpx 0;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #fff;

  button {
    width: 88%;
    height: 80rpx;
    line-height: 80rpx;
    font-size: 30rpx;
    border-radius: 0;
    background-color: #111;

    &:hover {
      background-color: #111;
    }
  }
}

.preview .text {
  position: absolute;
  top: 0;
  left: 0;
  margin-left: 0;
  // width: ~'calc(100%)' !important;
  width: 640rpx !important;
  height: 100%;
  text-align: left;
  // color: #e4e2e3;
  color: #222;

  .name {
    position: absolute;
    font-size: 22rpx !important;
    font-weight: 600;
  }

  .day1 {
    top: 275px;
    left: 30px;
  }

  .day1_100 {
    top: 378px;
    left: 30px;
  }

  .day2 {
    top: 275px;
    left: 81px;
  }

  .day2_100 {
    top: 378px;
    left: 81px;
  }

  .day3 {
    top: 275px;
    left: 116px;
  }

  .day3_100 {
    top: 378px;
    left: 116px;
  }

  .day4 {
    top: 273px;
    left: 152px;
  }

  .day4_100 {
    top: 376px;
    left: 152px;
  }

  .car {
    font-family: 'Microsoft JhengHei UI';
    font-size: 28rpx !important;
    font-weight: 600;
    top: 271px;
    left: 272px;
    color: #e92742;
  }

  .car_100 {
    top: 374px;
    left: 272px;
  }

  .name_ {
    font-family: 'Microsoft JhengHei UI';
    font-size: 26rpx !important;
    top: 323px;
    left: 75px;
  }

  .name__100 {
    top: 426px;
    left: 80px;
  }

  .name_detailsShare {
    font-size: 22rpx !important;
    width: calc(100% - 55px);
    // width: ~'calc(100% - 55px)';
  }

  .p_company {
    top: 785px;
    left: 44px;
  }

  .p_company_100 {
    top: 910px;
    left: 44px;
  }

  .p_company_100- {
    top: 905px;
    left: 44px;
  }

  .p_substitution {
    top: 862px;
    left: 44px;
  }

  .p_substitution_100 {
    top: 987px;
    left: 44px;
  }

  .p_substitution_100- {
    top: 975px;
    left: 44px;
  }

  .p_user {
    top: 937px;
    left: 44px;
  }

  .p_user_100 {
    top: 1062px;
    left: 44px;
  }

  .p_user_100- {
    top: 1042px;
    left: 44px;
  }

  .p_other {
    top: 1013px;
    left: 44px;
  }

  .p_other_100 {
    top: 1138px;
    left: 44px;
  }

  .user {
    position: relative;

    .img-text {
      position: absolute;
      top: 0;
      left: 0;
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
      border: 2rpx solid rgba(0, 0, 0, 0.1);
      overflow: hidden;
    }

    .name {
      width: 200rpx;
      height: 100rpx;
      line-height: 100rpx;
      margin-left: 130rpx;
    }
  }

  .qs {
    position: absolute;
    width: 185rpx;
    height: 185rpx;
    bottom: -4px;
    right: -6px;
  }
}



/*  */
.show {
  width: 100%;
  height: 100%;
  background: #fff;
  border: 1px solid red;
  position: relative;
}

.show .card {
  display: block;
  width: 690rpx;
  height: 940rpx;
  margin: 20rpx auto 0;
}

.show .name,
.show .header {
  position: absolute;
}

.show .name {
  width: 100%;
  text-align: center;
  color: red;
  top: 26rpx;
}

.show .header {
  width: 100rpx;
  height: 100rpx;
  border-radius: 100%;
  top: 100rpx;
  left: 100rpx;
}

.canvasBox {
  position: absolute;
  left: -1200rpx;
  bottom: 2000rpx;
  opacity: 0;
  width: 0;
  height: 0;
  visibility: hidden;
  display: block;
}
</style>
